<?php
$providers = $this->getParam('providers', []);
$auth = $this->getParam('auth', []);
$smtpEnabled = $this->getParam('smtpEnabled', false);
?>

<div class="cover">
    <h1 class="zone xl margin-bottom-large">
        <a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
        <br />

        <span>Users</span>
    </h1>
</div>

<div class="zone xl">
    <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
        <li data-state="/console/users?project={{router.params.project}}">

            <h2>Users</h2>

            <form class="box padding-small margin-bottom search"
                data-service="users.list"
                data-event="submit"
                data-param-search="{{router.params.search}}"
                data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                data-param-offset=""
                data-param-order-type="DESC"
                data-scope="sdk"
                data-name="project-users"
                data-success="state"
                data-success-param-state-keys="search,offset">
                <div class="row thin responsive">
                    <div class="col span-10">
                        <input name="search" id="searchUsers" type="search" autocomplete="off" placeholder="Search" class="margin-bottom-no" data-ls-bind="{{router.params.search}}">
                    </div>
                    <div class="col span-2 desktops-only">
                        <button class="fill" title="Search" aria-label="Search">Search</button>
                    </div>
                </div>
            </form>

            <div
                data-service="users.list"
                data-event="load,users.create,users.update,users.delete"
                data-param-search="{{router.params.search}}"
                data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                data-param-offset="{{router.params.offset}}"
                data-param-order-type="DESC"
                data-scope="sdk"
                data-name="project-users">

                <div data-ls-if="0 == {{project-users.sum}}" class="box margin-bottom">
                    <h3 class="margin-bottom-small text-bold">No Users Found</h3>

                    <p class="margin-bottom-no">Create your first user to get started</p>
                </div>

                <div data-ls-if="0 != {{project-users.sum}}">
                    <div class="margin-bottom-small text-align-end text-size-small text-fade"><span data-ls-bind="{{project-users.sum}}"></span> users found</div>

                    <div class="box margin-bottom">
                        <table class="vertical">
                            <thead>
                                <tr>
                                    <th width="40"></th>
                                    <th width="180">Name</th>
                                    <th>Email</th>
                                    <th width="140">Status</th>
                                    <th width="120">Joined</th>
                                </tr>
                            </thead>
                            <tbody data-ls-loop="project-users.users" data-ls-as="user">
                                <tr>
                                    <td class="hide">
                                        <img src="" data-ls-attrs="src={{user|avatar}}" data-size="45" alt="User Avatar" class="avatar pull-start" loading="lazy" width="30" height="30" />
                                    </td>
                                    <td data-title="Name: ">
                                        <a data-ls-attrs="href=/console/users/user?id={{user.$id}}&project={{router.params.project}}">
                                            <span data-ls-bind="{{user.name}}"></span>
                                            <span data-ls-if="{{user.name|escape}} === '' && {{user.email}} !== ''">Unknown</span>
                                            <span data-ls-if="{{user.name|escape}} === '' && {{user.email}} === ''">Anonymous User</span>
                                        </a>
                                    </td>
                                    <td data-title="Email: ">
                                        <small data-ls-bind="{{user.email}}"></span>
                                    </td>
                                    <td data-title="Status: ">
                                        <span data-ls-if="{{user.emailVerification}} === true && {{user.status}} === true">
                                            <span class="tag green">Verified</span>
                                        </span>

                                        <span data-ls-if="{{user.emailVerification}} !== true && {{user.status}} === true">
                                            <span class="tag">Unverified</span>
                                        </span>

                                        <span data-ls-if="{{user.status}} === false">
                                            <span class="tag red">Blocked</span>
                                        </span>
                                    </td>
                                    <td data-title="Created: "><small data-ls-bind="{{user.registration|dateText}}"></small></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="pull-end text-align-center paging">
                    <form
                        data-service="users.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-users"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-sum="{{project-users.sum}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
                    </form>

                    <span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-users.sum|pageTotal}}"></span>

                    <form
                        data-service="users.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-users"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-sum="{{project-users.sum}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
                    </form>
                </div>

                <div data-ui-modal class="box modal close" data-button-text="Add User">
                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                    <h1>Create User</h1>

                    <form
                        data-analytics
                        data-analytics-activity
                        data-analytics-event="submit"
                        data-analytics-category="console"
                        data-analytics-label="Create User"
                        data-service="users.create"
                        data-event="submit"
                        data-success="alert,trigger,reset"
                        data-success-param-alert-text="Created user successfully"
                        data-success-param-trigger-events="users.create"
                        data-failure="alert"
                        data-failure-param-alert-text="Failed to create user"
                        data-failure-param-alert-classname="error">

                        <label for="userId">User ID</label>
                        <input
                            type="hidden"
                            data-custom-id
                            data-id-type="auto"
                            data-validator="users.get"
                            required
                            maxlength="36"
                            pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{1,36}$"
                            id="userId"
                            name="userId" />

                        <label for="user-name">Name</label>
                        <input type="text" class="full-width" id="user-name" name="name" required autocomplete="off" maxlength="128" />

                        <label for="user-email">Email</label>
                        <input type="email" class="full-width" id="user-email" name="email" required autocomplete="off" />

                        <label for="user-password">Password</label>
                        <input type="password" class="full-width" id="user-password" name="password" required pattern=".{6,}" title="Six or more characters" autocomplete="off" />

                        <hr />

                        <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                    </form>
                </div>
            </div>
        </li>

        <li data-state="/console/users/teams?project={{router.params.project}}">
            <h2>Teams</h2>

            <form class="box padding-small margin-bottom search"
                data-service="teams.list"
                data-event="submit"
                data-param-search="{{router.params.search}}"
                data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                data-param-offset=""
                data-param-order-type="DESC"
                data-scope="sdk"
                data-name="project-teams"
                data-success="state"
                data-success-param-state-keys="search,offset">
                <div class="row thin responsive">
                    <div class="col span-10">
                        <input name="search" id="searchTeams" type="search" autocomplete="off" placeholder="Search" class="margin-bottom-no" data-ls-bind="{{router.params.search}}">
                    </div>
                    <div class="col span-2 desktops-only">
                        <button class="fill" title="Search" aria-label="Search">Search</button>
                    </div>
                </div>
            </form>

            <div
                data-service="teams.list"
                data-event="load,teams.create,teams.update,teams.delete"
                data-param-search="{{router.params.search}}"
                data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                data-param-offset="{{router.params.offset}}"
                data-param-order-type="DESC"
                data-scope="sdk"
                data-name="project-teams">

                <div data-ls-if="0 == {{project-teams.sum}}" class="box margin-bottom">
                    <h3 class="margin-bottom-small text-bold">No Teams Found</h3>

                    <p class="margin-bottom-no">Create your first team to get started</p>
                </div>

                <div data-ls-if="0 != {{project-teams.sum}}">
                    <div class="margin-bottom-small text-align-end text-size-small text-fade"><span data-ls-bind="{{project-teams.sum}}"></span> teams found</div>

                    <div class="box margin-bottom">
                        <table class="vertical">
                            <thead>
                                <tr>
                                    <th width="40"></th>
                                    <th>Name</th>
                                    <th width="150">Members</th>
                                    <th width="150">Created</th>
                                </tr>
                            </thead>
                            <tbody data-ls-loop="project-teams.teams" data-ls-as="team">
                                <tr>
                                    <td class="hide">
                                        <img src="" data-ls-attrs="src={{team.name|avatar}}" data-size="45" alt="Collection Avatar" class="avatar margin-end pull-start" loading="lazy" width="30" height="30" />
                                    </td>
                                    <td data-title="Name: ">
                                        <a data-ls-attrs="href=/console/users/teams/team?id={{team.$id}}&project={{router.params.project}}" data-ls-bind="{{team.name}}"></a>
                                    </td>
                                    <td data-title="Members: "><span data-ls-bind="{{team.sum}} members"></span></td>
                                    <td data-title="Date Created: "><small data-ls-bind="{{team.dateCreated|dateText}}"></small></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="pull-end text-align-center paging">
                    <form
                        data-service="teams.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-teams"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-sum="{{project-teams.sum}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
                    </form>

                    <span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-teams.sum|pageTotal}}"></span>

                    <form
                        data-service="teams.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-teams"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-sum="{{project-teams.sum}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
                    </form>
                </div>

                <div data-ui-modal class="box modal close" data-button-text="Add Team">
                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                    <h1>Create Team</h1>

                    <form
                        data-analytics
                        data-analytics-activity
                        data-analytics-event="submit"
                        data-analytics-category="console"
                        data-analytics-label="Create Team"
                        data-service="teams.create"
                        data-event="submit"
                        data-success="alert,trigger,reset"
                        data-success-param-alert-text="Created team successfully"
                        data-success-param-trigger-events="filter-teams-changed,teams.create"
                        data-failure="alert"
                        data-failure-param-alert-text="Failed to create team"
                        data-failure-param-alert-classname="error">

                        <label for="teamId">Team ID</label>
                        <input
                            type="hidden"
                            data-custom-id
                            data-id-type="auto"
                            data-validator="teams.get"
                            required
                            maxlength="36"
                            pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{1,36}$"
                            id="teamId"
                            name="teamId" />

                        <label for="team-name">Name</label>
                        <input type="text" class="full-width" id="team-name" name="name" required autocomplete="off" maxlength="128" />

                        <hr />

                        <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                    </form>
                </div>
            </div>
        </li>

        <li data-state="/console/users/providers?project={{router.params.project}}">
            <p data-ls-if="{{console-project.authLimit}} == 0" class="text-fade text-size-small margin-bottom pull-end">Unlimited Users <span class="link" data-ls-ui-trigger="project-update-auth-users-limit">Set Limit</a></p>
            <p data-ls-if="{{console-project.authLimit}} != 0" class="text-fade text-size-small margin-bottom pull-end"><span data-ls-bind="{{console-project.authLimit|statsTotal}}"></span> Users allowed <span class="link" data-ls-ui-trigger="project-update-auth-users-limit">Change Limit</a></p>

            <h2>Settings</h2>

            <div data-ui-modal class="modal close" data-button-alias="none" data-open-event="project-update-auth-users-limit">
                <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                <h1>Max Allowed Users</h1>

                <form data-analytics
                    data-analytics-activity
                    data-analytics-event="submit"
                    data-analytics-category="console"
                    data-analytics-label="Update Project Users Limit"
                    data-service="projects.updateAuthLimit"
                    data-scope="console"
                    data-event="submit"
                    data-param-project-id="{{router.params.project}}"
                    data-success="alert,trigger"
                    data-success-param-alert-text="Updated project users limit successfully"
                    data-success-param-trigger-events="projects.update"
                    data-failure="alert"
                    data-failure-param-alert-text="Failed to update project users limit"
                    data-failure-param-alert-classname="error">

                    <input name="limit" id="users-limit" type="number" data-ls-bind="{{console-project.authLimit}}" data-cast-to="numeric" min="0" />

                    <div class="info row thin margin-bottom margin-top">
                        <div class="col span-1">
                            <i class="icon-info-circled text-sign"></i>
                        </div>
                        <div class="col span-11">This limit will prevent new users from signing up for your project, no matter what auth method has been used. You will still be able to create users and team memberships from your Appwrite console. For an unlimited amount of users, set the limit to 0.</div>
                    </div>

                    <button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                </form>
            </div>

            <p class="text-fade margin-bottom">Choose auth methods you wish to use.</p>

            <ul class="tiles cell-3 margin-bottom-small">
                <?php foreach($auth as $index => $method):
                    $key = ucfirst($method['key'] ?? '');
                    $name = $method['name'] ?? '';
                    $icon = $method['icon'] ?? '';
                    $docs = $method['docs'] ?? '';
                    $enabled = $method['enabled'] ?? false;
                    ?>
                <li class="">
                    <div class="box padding-small margin-bottom clear">
                        <?php if($enabled): ?>
                            <form
                                data-analytics
                                data-analytics-activity
                                data-analytics-event="submit"
                                data-analytics-category="console"
                                data-analytics-label="Update Project Auth Status (<?php echo $this->escape($name); ?>)"
                                data-service="projects.updateAuthStatus"
                                data-scope="console"
                                data-event="change"
                                data-param-project-id="{{router.params.project}}"
                                data-success="alert,trigger"
                                data-success-param-alert-text="Updated project auth status successfully"
                                data-success-param-trigger-events="projects.update"
                                data-failure="alert"
                                data-failure-param-alert-text="Failed to update project auth status settings"
                                data-failure-param-alert-classname="error">
                                <input name="method" id="auth<?php echo $this->escape($key); ?>" type="hidden" autocomplete="off" value="<?php echo $this->escape($index); ?>">
                                <?php if( !(in_array($key, ['usersAuthMagicURL', 'usersAuthInvites']) && !$smtpEnabled)): ?>
                                    <input name="status" type="hidden" data-forms-switch data-ls-bind="{{console-project.auth<?php echo $this->escape($key); ?>}}" data-cast-to="boolean" class="pull-end" />
                                <?php endif; ?>
                            </form>
                        <?php endif; ?>

                        <img src="<?php echo $this->escape($icon); ?>?buster=<?php echo APP_CACHE_BUSTER; ?>" alt="Email/Password Logo" class="pull-start provider margin-end" />

                        <span class="text-size-small"><?php echo $this->escape($name); ?><?php if(!$enabled): ?> <spann class="text-fade text-size-xs">soon</span><?php endif; ?>

                        <?php if( in_array($key, ['usersAuthMagicURL', 'usersAuthInvites']) && !$smtpEnabled): ?>
                            <p class="margin-bottom-no text-one-liner text-size-small text-danger">
                                SMTP Disabled
                            </p>
                        <?php else: ?>
                            <?php if($docs): ?>
                            <p class="margin-bottom-no text-one-liner text-size-small">
                                <a href="<?php echo $this->escape($docs); ?>" target="_blank" rel="noopener">Docs<i class="icon-link-ext"></i></a>
                            </p>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </li>
                <?php endforeach;?>
            </ul>

            <h3>OAuth2 Providers</h3>

            <div class="margin-bottom margin-top"
                data-service="projects.get"
                data-event="load,projects.create,projects.update,projects.deleteProject"
                data-name="console-project"
                data-param-project-id="{{router.params.project}}"
                data-scope="console">
                <ul class="tiles cell-3 margin-bottom-small">
                    <?php foreach ($providers as $provider => $data):
                    if (isset($data['enabled']) && !$data['enabled']) {continue;}
                        if (isset($data['mock']) && $data['mock']) {continue;}
                        $sandbox = $data['sandbox'] ?? false;
                        $form = $data['form'] ?? false;
                        $name = $data['name'] ?? 'Unknown';
                        $beta = $data['beta'] ?? false;
                    ?>
                        <li class="<?php echo (isset($data['enabled']) && !$data['enabled']) ? 'dev-feature' : ''; ?>">
                            <div data-ui-modal class="modal close" data-button-alias="none" data-open-event="provider-update-<?php echo $provider; ?>">
                                <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                                <h1><?php echo $this->escape($name); ?> <?php if ($sandbox): ?>Sandbox<?php endif;?> OAuth2 Settings</h1>

                                <form
                                    autocomplete="off"
                                    data-analytics
                                    data-analytics-activity
                                    data-analytics-event="submit"
                                    data-analytics-category="console"
                                    data-analytics-label="Update Project OAuth2"
                                    data-service="projects.updateOAuth2"
                                    data-scope="console"
                                    data-event="submit"
                                    data-param-project-id="{{router.params.project}}"
                                    data-success="alert,trigger"
                                    data-success-param-alert-text="Updated project OAuth2 settings successfully"
                                    data-success-param-trigger-events="projects.update"
                                    data-failure="alert"
                                    data-failure-param-alert-text="Failed to update project OAuth2 settings"
                                    data-failure-param-alert-classname="error">

                                    <input style="display: none" type="text" /> <?php /** Disabling Chrone Autofill @see https://stackoverflow.com/a/15917221/2299554 */?>
                                    <input style="display: none" type="password" /> <?php /** Disabling Chrone Autofill @see https://stackoverflow.com/a/15917221/2299554 */?>

                                    <input name="provider" id="provider<?php echo $this->escape(ucfirst($provider)); ?>" type="hidden" autocomplete="off" value="<?php echo $this->escape($provider); ?>">

                                    <?php if (!$form): ?>
                                        <label for="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid">App ID</label>
                                        <input name="appId" id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid" type="text" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Appid}}">

                                        <label for="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Secret">App Secret</label>
                                        <input name="secret" data-forms-show-secret id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Secret" type="password" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Secret}}">
                                    <?php else: ?>
                                        <label for="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid">Bundle ID <span class="tooltip" data-tooltip="Attribute internal display name"><i class="icon-info-circled"></i></span></label>
                                        <input name="appId" id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid" type="text" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Appid}}" placeholder="com.company.appname" />
                                        <input name="secret" data-forms-oauth-apple id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Secret" type="hidden" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Secret}}" />
                                    <?php endif; ?>

                                    <div class="info row thin margin-bottom margin-top">
                                        <div class="col span-1">
                                            <i class="icon-info-circled text-sign"></i>
                                        </div>
                                        <div class="col span-11">
                                            <p>To complete set up, add this OAuth2 redirect URI to your <?php echo $this->escape(ucfirst($provider)); ?> app configuration.</p>

                                            <div class="input-copy">
                                                <input data-forms-copy type="text" disabled data-ls-bind="{{env.ENDPOINT}}/v1/account/sessions/oauth2/callback/<?php echo $this->escape($provider); ?>/{{router.params.project}}" class="margin-bottom-no" />
                                            </div>
                                        </div>
                                    </div>

                                    <button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                </form>
                            </div>

                            <div class="box padding-small margin-bottom">
                                <span data-ls-if="
                                    {{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Appid}} &&
                                    {{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Secret}}">
                                    <button class="switch on pull-end" data-ls-ui-trigger="provider-update-<?php echo $provider; ?>"></button>
                                </span>

                                <span data-ls-if="
                                    !{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Appid}} ||
                                    !{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Secret}}">
                                    <button class="switch pull-end" data-ls-ui-trigger="provider-update-<?php echo $this->escape($provider); ?>"></button>
                                </span>

                                <img src="/images/users/<?php echo $this->escape(strtolower($provider)); ?>.png?buster=<?php echo APP_CACHE_BUSTER; ?>" alt="<?php echo $this->escape(ucfirst($provider)); ?> Logo" class="pull-start provider margin-end" />

                                <span class="text-size-small">
                                    <?php echo $this->escape($name); ?> <?php if ($sandbox): ?><span class="text-size-xs text-fade">sandbox</span><?php endif;?> <?php if ($beta): ?><span class="text-size-xs text-fade">beta</span><?php endif;?>
                                </span>

                                <p class="margin-bottom-no text-one-liner text-size-small">
                                    <a href="<?php echo $data['developers']; ?>" target="_blank" rel="noopener">OAuth2 Docs<i class="icon-link-ext"></i></a>
                                </p>
                            </div>
                        </li>
                    <?php endforeach;?>
                </ul>
            </div>
        </li>
        <li data-state="/console/users/usage?project={{router.params.project}}">
                <form
                    class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '90d'"
                    data-service="users.getUsage"
                    data-event="submit"
                    data-name="usage"
                    data-param-range="90d">
                    <button class="tick">90d</button>
                </form>

                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '90d'" disabled>90d</button>

                <form
                    class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '30d'"
                    data-service="users.getUsage"
                    data-event="submit"
                    data-name="usage">
                    <button class="tick">30d</button>
                </form>

                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '30d'" disabled>30d</button>

                <form
                    class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '24h'"
                    data-service="users.getUsage"
                    data-event="submit"
                    data-name="usage"
                    data-param-range="24h">
                    <button class="tick">24h</button>
                </form>

                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '24h'" disabled>24h</button>

                <h2>Usage</h2>

                <div data-service="users.getUsage" data-event="load" data-name="usage">
                    <h3 class="margin-bottom-tiny">Users</h3>
                    <p class="text-fade">Count of users over time</p>
                    <div class="box margin-bottom-small">
                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                            <div class="chart background-image-no border-no margin-bottom-no">
                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Users=usersCount" data-show-y-axis="true" data-height="140" />
                            </div>
                        </div>
                    </div>

                    <ul class="chart-notes margin-bottom-large">
                        <li>Users <span data-ls-bind="({{usage.usersCount|statsGetLast|statsTotal}})"></span></li>
                    </ul>

                    <h3 class="margin-bottom-tiny">Operations</h3>
                    <p class="text-fade">Count of users create, read, update and delete operations over time</p>
                    <div class="box margin-bottom-small">
                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                            <div class="chart background-image-no border-no margin-bottom-no">
                                <input 
                                    type="hidden" 
                                    data-ls-bind="{{usage}}"
                                    data-forms-chart="Created=usersCreate,Read=usersRead,Updated=usersUpdate,Deleted=usersDelete"
                                    data-show-y-axis="true"
                                    data-colors="create,read,update,delete"
                                    data-height="140" />
                            </div>
                        </div>
                    </div>

                    <ul class="chart-notes margin-bottom-large crud">
                        <li>Created</li>
                        <li>Read</li>
                        <li>Updated</li>
                        <li>Deleted</li>
                    </ul>
                </div>
            </li>
    </ul>
</div>
